<template>
  <div class="user-center-container">
    <!-- 用户信息头部 -->
    <header class="user-header">
      <div class="user-info">
        <h2 class="username">新一贷</h2>
        <div class="user-meta">
          <span>30秒申批</span>
          <span class="divider">|</span>
          <span>实时到账</span>
          <span class="divider">|</span>
          <span>最长3年</span>
        </div>
        <div class="user-phone">{{ userStore.state.user.phone || '15111841304' }}</div>
      </div>
    </header>

    <!-- 菜单列表 -->
    <div class="menu-list">
      <div class="menu-item" @click="navigateTo('profile')">
        <div class="menu-icon">
          <el-icon><User /></el-icon>
        </div>
        <div class="menu-text">{{ t('userCenter.menu.profile') || '我的资料' }}</div>
        <div class="menu-arrow">
          <el-icon><ArrowRight /></el-icon>
        </div>
      </div>
      
      <div class="menu-item" @click="navigateTo('loan')">
        <div class="menu-icon">
          <el-icon><Money /></el-icon>
        </div>
        <div class="menu-text">{{ t('userCenter.menu.loan') || '我的借款' }}</div>
        <div class="menu-arrow">
          <el-icon><ArrowRight /></el-icon>
        </div>
      </div>
      
      <div class="menu-item" @click="navigateTo('repayment')">
        <div class="menu-icon">
          <el-icon><Wallet /></el-icon>
        </div>
        <div class="menu-text">{{ t('userCenter.menu.repayment') || '我的还款' }}</div>
        <div class="menu-arrow">
          <el-icon><ArrowRight /></el-icon>
        </div>
      </div>
      
      <div class="menu-item" @click="navigateTo('faq')">
        <div class="menu-icon">
          <el-icon><QuestionFilled /></el-icon>
        </div>
        <div class="menu-text">{{ t('userCenter.menu.faq') || '常见问题' }}</div>
        <div class="menu-arrow">
          <el-icon><ArrowRight /></el-icon>
        </div>
      </div>
      
      <div class="menu-item" @click="navigateTo('reset-password')">
        <div class="menu-icon">
          <el-icon><Lock /></el-icon>
        </div>
        <div class="menu-text">修改密码</div>
        <div class="menu-arrow">
          <el-icon><ArrowRight /></el-icon>
        </div>
      </div>
      
      <div class="menu-item" @click="handleLogout">
        <div class="menu-icon">
          <el-icon><SwitchButton /></el-icon>
        </div>
        <div class="menu-text">退出登录</div>
        <div class="menu-arrow">
          <el-icon><ArrowRight /></el-icon>
        </div>
      </div>
    </div>
  </div>
      <!-- 底部导航栏 -->
      <bottom-nav-bar />
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
import { useUserStore } from 'store';
import { ElMessage } from 'element-plus';
import BottomNavBar from '../../components/BottomNavBar.vue';
import { 
  User, 
  CreditCard, 
  Money, 
  Wallet, 
  Coin, 
  QuestionFilled, 
  HomeFilled, 
  SwitchButton,
  ArrowRight,
  Lock,
  Service
} from '@element-plus/icons-vue';
import authService from '../../services/authService';

// 国际化
const { t } = useI18n();

// 路由
const router = useRouter();
const route = useRoute();

// 用户状态
const userStore = useUserStore();

// 活动菜单
const activeMenu = computed(() => {
  const path = route.path;
  const pathArray = path.split('/');
  return pathArray[pathArray.length - 1];
});

// 导航到对应的资料页面
const navigateTo = (type) => {
  const routes = {
    'profile': '/user/profile',
    'loan': '/loan',
    'repayment': '/user/repayment',
    'faq': '/user/faq',
    'reset-password': '/user/reset-password'
  }
  
  if (routes[type]) {
    router.push(routes[type])
  } else {
    ElMessage.warning('该功能正在开发中')
  }
}




// 导航到首页
const goToHome = () => {
  router.push('/');
};

// 处理登出
const handleLogout = () => {
  authService.loginOut();
};

// 获取用户信息
onMounted(async () => {

});
</script>

<style scoped lang="scss">
.user-center-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f7fa;
}

// 用户信息头部
.user-header {
  background-color: #1e2b48;
  color: white;
  padding: 20px;
  text-align: center;
  
  .user-info {
    padding: 15px 0;
    
    .username {
      font-size: 24px;
      margin: 0 0 10px 0;
      font-weight: 500;
    }
    
    .user-meta {
      font-size: 14px;
      margin-bottom: 15px;
      color: rgba(255, 255, 255, 0.8);
      
      .divider {
        margin: 0 8px;
      }
    }
    
    .user-phone {
      font-size: 20px;
      font-weight: 500;
    }
  }
}

// 菜单列表
.menu-list {
  flex: 1;
  background-color: #f5f7fa;
  margin-bottom: 60px; // Add margin for bottom nav bar
  
  .menu-item {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    background-color: white;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    
    &:active {
      background-color: #f9f9f9;
    }
    
    .menu-icon {
      width: 24px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 12px;
      color: #666;
      
      .el-icon {
        font-size: 20px;
      }
    }
    
    .menu-text {
      flex: 1;
      font-size: 16px;
      color: #333;
    }
    
    .menu-arrow {
      color: #ccc;
    }
  }
}



// 过渡动画
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

// 响应式调整
@media (max-width: 768px) {
  .user-header {
    padding: 15px;
  }
}
</style>